<template>
	<!-- 保物 -->
	<view class="" v-if="load" style="padding-bottom: 100rpx;">
		<uni-head title="产品详情"></uni-head>
		<image :src="info.detail_img" mode="widthFix" class="bx-banner"></image>
		<view style="padding: 12rpx;">
			<view style="background-color: white;border-radius: 10rpx;padding: 12rpx;padding-top: 40rpx;">
				<view style="text-align: center;font-size: 36rpx;">{{info.name}}</view>
				<view style="margin-top: 30rpx;margin-bottom: 30rpx;height: 2rpx;background-color: #F4F4F4;"></view>
				<view>
					<item :info="info"></item>
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 40rpx;padding: 12rpx;">
			<view class="" style="font-weight: bold;">
				具体信息
			</view>
			<view class="" style="display: flex;margin-top: 30rpx;font-size: 28rpx;">
				<image src="/static/img/check.png" style="min-width: 28rpx;height: 28rpx;max-width: 28rpx;margin-top: 8rpx;" mode=""></image>
				<view class="" style="margin-left: 10rpx;">
					可选：扩展火灾爆炸责任
				</view>
			</view>
			<view class="" style="display: flex;margin-top: 30rpx;font-size: 28rpx;">
				<image src="/static/img/check.png" style="min-width: 28rpx;height: 28rpx;max-width: 28rpx;margin-top: 8rpx;" mode=""></image>
				<view class="" style="margin-left: 10rpx;">
					本保单仅承保充电设备在投保使用后，在正常使用过程中发生意外事故造成三者的人身伤亡和财产损失依法 应由被保险人承担的经济赔偿责任，保险人负责赔偿。
				</view>
			</view>
			<view class="" style="display: flex;margin-top: 30rpx;font-size: 28rpx;">
				<image src="/static/img/check.png" style="min-width: 28rpx;height: 28rpx;max-width: 28rpx;margin-top: 8rpx;" mode=""></image>
				<view class="" style="margin-left: 10rpx;">
					本保单不承保任何由于产品设计、制造缺陷发生意外事故导致三者的人身伤
					亡和财产损失。
				</view>
			</view>
		</view>
		<view class="bx-footer">
			<view class="bx-footer-left" @tap="toHome()">
				<image src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/tohome.png" class="bx-footer-icon"
					mode="widthFix"></image>
				<view class="bx-footer-left-txt">返回首页</view>
			</view>
			<view class="bx-footer-right" @tap="toForm()">立即投保</view>
		</view>
	</view>
</template>

<script >
	import uniHead from '@/components/uni-dead/head.vue';
	import item from './cdz2Item.vue'
	 export default {
		 components:{
			 uniHead,
			 item
		 },
		 data(){
			 return {
				 load:false,
				 info:{},
				 id:"",
				 
			 }
		 },
		 onLoad(e) {
		 	this.id = e.id;
			this.getData()
		 },
		 methods:{
			 getData(){
				 uni.showLoading({
				 	title: '加载中'
				 })
				 this.ajax('index/detail',{
					 data:{
						 id:this.id
					 },
					 success:(res)=>{
						 this.info = res.msg;
						 console.log(this.info);
						 uni.hideLoading();
						 this.load = true;
					 }
				 })
			 },
			 toHome(){
				 uni.switchTab({
				 	url: '/pages/index/index'
				 })
			 },
			toForm() {
				uni.showModal({
					title: '重要提示',
					content: '尊敬的客户，您即将进入平安保险的产品投保流程。根据银监会[2020]26号的监管规定，为了维护您的权益，您在投保过程中的完整操作轨迹将被记录，请您仔细阅读条款、责任免除、特别约定等内容。',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							if (this.info.is_login == 0) {
								this.toast('请先登录');
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}, 1000);
								return;
							}
							uni.navigateTo({
								url: '/pages/bx/form?id=' + this.info.id
							})
						}
					}
				});
			
			},
		 }
	 }
 
</script>

<style scoped lang="scss">
	.bx-banner{
		display: block;
		width: 100%;
	}
	.bx-footer{
		position: fixed;
		width: 100%;
		height: 100upx;
		left: 0;
		bottom: 0;
		display: flex;
	}
	
	.bx-footer-left{
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		width: 200upx;
		background-color: #FFFFFF;
		
	}
	.bx-footer-icon{
		display: block;
		width:46upx;
		height:46upx;
	}
	
	.bx-footer-left-txt{
		font-size: 24upx;
		color: #666666;
	}
	
	.bx-footer-right{
		flex: 1;
		background-image:linear-gradient(to top,#5180F9,#5AC3FF) ;
		text-align: center;line-height: 100upx;
		color: #FFFFFF;
		font-size: 36upx;
	}
	
	.bx-footer-right-g{
		flex: 1;
		background-color: #F95D4A;
		text-align: center;line-height: 100upx;
		color: #FFFFFF;
		font-size: 36upx;
	}
</style>